// api列表页
window.addEventListener('load',function(){
// 1.分类数据渲染功能

    //1.1 定义数据源 
    let apiCateDate=[
        {name:'全部',keyword:'身份证实名',isBold:false},
        {name:'生活服务',keyword:'身份证实名',isBold:false},
        {name:'金融科技',keyword:'手机号',isBold:true},
        {name:'交通地理',keyword:'车牌号',isBold:false},
        {name:'充值缴费',keyword:'手机号',isBold:false},
        {name:'数据智能',keyword:'ip',isBold:false},
        {name:'企业工商',keyword:'营业执照',isBold:false},
        {name:'应用开发',keyword:'app',isBold:false},
        {name:'电子商务',keyword:'ip',isBold:false},
        {name:'吃喝玩乐',keyword:'钱',isBold:false}
    ];

    //1.2 遍历数据,拼接结构 
    apiCateDate.forEach(function(v){
        // console.log(v);

        //创建标签
        let dom=document.createElement('li');

        //添加属性
            // dom.keyword=v.keyword; //自定义属性不能直接使用
            dom.setAttribute('keyword',v.keyword);

            //判定是否加粗
            if(v.isBold){
                // dom.className='fblod';
                dom.setAttribute('class','fblod');
            }

        //添加内容
            dom.textContent=v.name;

        //向指定的apiCate添加新元素
        apiCate.appendChild(dom);
    })


    // 动态渲染搜索框内容

    //1.获取到apiCate中的所有li
    let apiLis=getEleAll('#apiCate li');
    let apiName=getEle('#apiName');
    let apiKeyWord=getEle('#apiKeyWord');

    //2.遍历注册事件
    apiLis.forEach(function(v){
        // console.log(v);

        //3.注册事件
        v.addEventListener('click',function(){
            

            //获取当前li的内容
            let cont=this.textContent;
            //获取当前li标签上的keyword 
            let keyw=this.getAttribute('keyword');
            //添加到apiName
            apiName.textContent=cont;
            apiKeyWord.placeholder=keyw;

            //清除所有li标签上的active
            apiLis.forEach(function(vv){
                vv.classList.remove('active')
            })

            //给当前li添加active,其它li去掉active
            this.classList.add('active');



            // console.log(cont);
        })
    })

    // console.log(apiLis);


    //api列表内容数据渲染
    let apiContDate=[
        // 第一组数据
        {imgUrl:'./imgs/API_01.jpg',title:'2021出行防疫政策指南',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_02.jpg',title:'身份证实名认证',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_03.jpg',title:'天气预报',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_04.jpg',title:'银行卡四元素校验',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_05.jpg',title:'短信API服务',price:'￥0.2000/次',isSpecial:true},
        // 第二组数据
        {imgUrl:'./imgs/API_01.jpg',title:'2021出行防疫政策指南2',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_02.jpg',title:'身份证实名认证2',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_03.jpg',title:'天气预报2',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_04.jpg',title:'银行卡四元素校验2',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_05.jpg',title:'短信API服务2',price:'￥0.2000/次',isSpecial:true},
        // 第三组数据
        {imgUrl:'./imgs/API_01.jpg',title:'2021出行防疫政策指南3',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_02.jpg',title:'身份证实名认证3',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_03.jpg',title:'天气预报3',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_04.jpg',title:'银行卡四元素校验3',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_05.jpg',title:'短信API服务3',price:'￥0.2000/次',isSpecial:true},
        // 第四组数据
        {imgUrl:'./imgs/API_01.jpg',title:'2021出行防疫政策指南4',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_02.jpg',title:'身份证实名认证4',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_03.jpg',title:'天气预报4',price:'免费',isSpecial:false},
        {imgUrl:'./imgs/API_04.jpg',title:'银行卡四元素校验4',price:'￥0.2000/次',isSpecial:true},
        {imgUrl:'./imgs/API_05.jpg',title:'短信API服务4',price:'￥0.2000/次',isSpecial:true},

    ];

    // console.log(apiContDate);

    //定义变量
    let currentPage=0; //开始索引值  
    let sPages=5;  //显示5条
    let total=apiContDate.length;
   //封装渲染函数
   function rander(currentPage,sPages){
        //定义保存结构
    let apiContHtml='';
    //获取到相要的数据 --数组截取操作  slice(开始索引,结束索引)  --包含开始,不包含结束
    // console.log(apiContDate.slice(currentPage,sPages));
    
    let pagesData=apiContDate.slice(currentPage,sPages);

    //遍历数据
    pagesData.forEach(function(v,i){
        // console.log(v);

        //拼接结构
        apiContHtml+=`
        <li class="rel">
            <span class="tips ${v.isSpecial?'on':''}">企业专用</span>
            <div class="mt55">
                <a href="#">
                    <img src="${v.imgUrl}" alt="">
                    <p class="c6 mt20b10">
                    ${v.title}
                    </p>
                    <span class="${v.price=='免费'?'green':'red'}">${v.price}</span>
                </a>
            </div>
            <a href="#" class="link">申请数据</a>
        </li>`
    });

    //把拼接好的数据添加到指定位置
    getEle('#apiContentList').innerHTML=apiContHtml;
   }


   //调用rander()
   rander(currentPage,sPages);


   //分页的点击事件
   let pagesA=getEleAll('#pagesList a');

   pagesA.forEach(function(v){
    // console.log(v);
        //注册事件
        v.addEventListener('click',function(){
            //获取当前a标签中的页码值
            let pageIndex=this.textContent;

            if(pageIndex==1){//第一页,就是默认显示
                // currentPage=0;
            }else{
                /* 
                                    开始索引索引   结束索引

                   假如是第2页          5           10
                   假如是第3页          10           15

                        
                */
                //    currentPage=(pageIndex-1)*sPages;

            }

            currentPage=(pageIndex-1)*sPages;



            rander(currentPage,pageIndex*sPages);
        })
   })

   
})